<template>
  <bi-page class="flight-page">
    <!-- 航班趋势图 -->
    <div class="flight-trend">
      <div class="trend-title">
        <span class="icon"
          ><img src="../../assets/images/flight_trend.png" /></span
        ><span class="title">航班入境人员趋势观测</span>
      </div>
      <div id="trend-chart"></div>
    </div>
    <!-- 航班详情列表 -->
    <div class="flight-detail">
      <flightDetail :flightTime="flightTime" v-show="flightTime"></flightDetail>
    </div>
  </bi-page>
</template>
<script>
  function getDay(day){
    var today = new Date();
    var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
    today.setTime(targetday_milliseconds); //注意，这行是关键代码
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = doHandleMonth(tMonth + 1);
    tDate = doHandleMonth(tDate);
    return tYear+"-"+tMonth+"-"+tDate;
  }
  function doHandleMonth(month){
    var m = month;
    if(month.toString().length == 1){
      m = "0" + month;
    }
    return m;
  }
import { flightTrendData } from "./index";
import BiPage from 'board/common/page'
var echarts = require("echarts");
let documentTitle = ''
export default {
  name: "flightTopic",

  components: {
    BiPage,
    flightDetail: () => import("./components/flightDetail"),
  },
  data() {
    return {
      chartData: [],
      flightTime: "", // 点击获取航班日期
    };
  },
  mounted() {
    this.getQuery();
  },
  methods: {
    async getQuery() {
      const { data } = await flightTrendData();
      this.chartData = data.data.reverse();
      this.setChartOption(this.chartData);
    },
    setChartOption(echartData) {
      var myChart = echarts.init(document.getElementById("trend-chart"));

      let xAxisData = echartData.map((v) => this.changeDate(v.groundTime));
      let yAxisData = echartData.map((v) => v.groundNum);
      let toDayTime=new Date(getDay(0)).getTime()
      //筛选未来三天的航班数据
      let newData = echartData.filter(v=>{return toDayTime<new Date(v.groundTime).getTime()});
      //如果没有找到未来三天的数据就默认显示最近一天的数据详情，如果有，则显示最近一个未来天数的详情
      var fd=newData.length?newData[0]:echartData.splice(-1)[0];
      this.flightTime = fd.groundTime
              .split("/")
              .join("-");
      let numArr = ["一", "二", "三"];
      let markPointData = newData.map((item, index) => ({
        // yAxis: index == 2 ? item.groundNum - 40 : item.groundNum - 60,
        yAxis: item.groundNum,
        xAxis: this.changeDate(item.groundTime),
        symbolSize: 0.1,
        label: {
          formatter: `未来第${numArr[index]}天`.split("").join("\n"),
          position: "top",
          distance: 25,
        },
      }));
      let options = {
        backgroundColor: "#fff",
        dataZoom: {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: Math.max(echartData.length - (7 + 3), 0) / echartData.length * 100, // 起始位置，17个日期，过去7天+当前7天+未来3天 (17-(7+3))/17 * 100 = 41
          end: 100
        },
        grid: {
          top: "32px",
          left: "27px",
          right: "27px",
          bottom: "10px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              fontSize: 10,
              fontWeight: 600,
              fontFamily: "DINAlternate-Bold, DINAlternate",
              margin: 10,
              interval: 0,
              showMaxLabel: true,
              textStyle: {
                color: "#868686",
              },
              formatter: function(value, index) {
                if (index === 0) {
                  return `${value}`;
                } else if (index === echartData.length - 1) {
                  return `${value}`;
                }
                return value;
              },
              rotate: 45
            },
            axisLine: {
              lineStyle: {
                color: "#ECECEC",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#ECECEC",
              },
            },
            axisTick: {
              show: false,
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: "value",

            axisLabel: {
              fontSize: 10,
              fontWeight: 600,
              fontFamily: "DINAlternate-Bold, DINAlternate",
              margin: 20,
              textStyle: {
                color: "#868686",
              },
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 10,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                color: "#ECECEC",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "趋势",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 12,
            zlevel: 3,
            itemStyle: {
              normal: {
                // 静止时：
                color: "#FFAC1E",
                borderWidth: 4,
                borderColor: "#FFAC1E",
                shadowColor: "#FFAC1E",
                shadowBlur: 6,
              },
              emphasis: {
                // 鼠标经过时：
                color: "#FFAC1E",
                borderColor: "#FFAC1E",
              },
            },
            lineStyle: {
              normal: {
                width: 4,
                color: "#FFAC1E",
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#FFAC1E",
                fontSize: 10,
                fontFamily: "DINAlternate-Bold, DINAlternate",
                fontweight: "bold",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,172,30,0.46)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,172,30,0)",
                    },
                  ],
                  false
                ),
              },
            },
            markPoint: {
              silent: true,
              label: {
                textStyle: { color: "#fff" },
                padding: [5, 5, 5, 5],
                fontSize: 10,
                borderRadius: 4,
                backgroundColor: "#FFAC1E",
                position: "bottom",
              },
              data: markPointData,
            },
            data: yAxisData,
          },
        ],
      };
      myChart.setOption(options);
      myChart.setOption(options);
      myChart.on("click", (params) => {
        this.flightTime = params.name;
      });
    },
    changeDate(date) {
      return (
        new Date(date).getFullYear() +
        "/" +
        (new Date(date).getMonth() + 1) +
        "/" +
        new Date(date).getDate()
      );
    },
  },
  beforeRouteEnter (to, from, next) {
    // 按照需求设置文档标题
    documentTitle = window.document.title
    window.document.title = '入境航班专题分析'
    next()
  },
  beforeRouteLeave (to, from, next) {
    window.document.title = documentTitle
    next()
  }
};
</script>

<style lang='scss' scoped>
.flight-page {
  padding-top: 17px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  background: #eff4fa;
  min-height: 100vh;
}
.flight-trend {
  width: calc(100% -32px);
  height: 269px;
  background: #ffffff;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  opacity: 1;
  border-radius: 4px;
  margin: 0 16px 15px 16px;
  .trend-title {
    padding: 14px 15px 0 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #1d1f24;
    .icon {
      margin-right: 7px;
      display: inline-block;
    }
  }
  #trend-chart {
    height: 213px;
  }
}
.flight-detail {
  padding: 0 16px;
}
</style>
